<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="templateAdd()"><i class="el-icon-plus"></i>换肤</el-button>
      <el-button type="primary" @click="defaulPf">默认皮肤</el-button>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="活动ID">
        <el-input v-model="formInline.relateId" style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="formInline.relateName" style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item label="所属设备">
        <el-select v-model="formInline.equipmentType" style="width: 180px" filterable clearable>
          <el-option label="IOS" value="22"></el-option>
          <el-option label="惠付通" value="31"></el-option>
          <el-option label="安卓" value="20"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" style="width: 120px" filterable clearable>
          <el-option label="未开始" value="0"></el-option>
          <el-option label="进行中" value="1"></el-option>
          <el-option label="已结束" value="2"></el-option>
          <el-option label="已作废" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="margin-left: 20px">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="relateId"
        show-overflow-tooltip
        label="ID"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="branchName"
        label="分公司"
        align="center"
        width="350">
      </el-table-column>
      <el-table-column
        prop="relateName"
        label="活动名称"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        label="所属设备"
        width="100"
        align="center">
        <template scope="scope">
          <span v-if="scope.row.equipmentType === 22">IOS</span>
          <span v-if="scope.row.equipmentType === 20">安卓</span>
          <span v-if="scope.row.equipmentType === 31">惠付通</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动状态"
        align="center"
        width="100">
        <template scope="scope">
          <span v-if="scope.row.status === 0">未开始</span>
          <span v-if="scope.row.status === 1">进行中</span>
          <span v-if="scope.row.status === 2">已结束</span>
          <span v-if="scope.row.status === 3">已作废</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createUserName"
        label="创建人"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200" >
        <template scope="scope">
          <el-button @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-show="scope.row.status === 0 || scope.row.status === 1" @click="handle(scope.$index, scope.row, $event)" size="small">作废</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--详情弹窗-->
    <el-dialog title="活动详情" :visible.sync="detailDialog">
      <p style="height: 1px; background: black; margin-bottom: 10px"></p>
      <div class="shuoming">
          <pre style="margin: -10px">
          分公司：{{detailData.branchName}}
          活动名称：{{detailData.relateName}}
          活动时间：{{detailData.startTime}} - {{detailData.endTime}}
          设备类型：<span v-show="detailData.equipmentType === 22">IOS</span><span v-show="detailData.equipmentType === 20">安卓</span><span v-show="detailData.equipmentType === 31">惠付通</span>
          皮肤：{{detailData.skinName}}
          备注：{{detailData.remark}}
          效果示例图：<img :src="this.imgHost + '/' + detailData.imgUrl" alt="" width="50%" height="200px">
          </pre>
      </div>
    </el-dialog>
    <!--默认皮肤-->
    <el-dialog class="dialog" title="" :visible.sync="dialogTemplate">
      <el-form :inline="true" :model="formPf">
        <el-form-item label="所属设备">
          <el-select v-model="formPf.equipmentType" @change="equipmentTypeChange" style="width: 180px">
            <el-option label="IOS" value="22"></el-option>
            <el-option label="惠付通" value="31"></el-option>
            <el-option label="安卓" value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        :data="templateTable.data"
        border
        style="width: 100%">
        <el-table-column
          prop="skinId"
          label="ID"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="markId"
          label="标识ID"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          label="所属设备"
          width="100"
          align="center">
          <template scope="scope">
            <span v-if="scope.row.equipmentType === 22">IOS</span>
            <span v-if="scope.row.equipmentType === 20">安卓</span>
            <span v-if="scope.row.equipmentType === 31">惠付通</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="skinName"
          label="皮肤名称"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          label="皮肤样式">
          <template scope="scope">
            <img :src="imgHost + '/' + scope.row.imgUrl" style="width:160px;height:100px;margin:5px 0" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button v-if="scope.row.status === 0" @click="check(scope.$index, scope.row)" size="small">选择</el-button>
            <el-button type="text" v-else @click="" size="small">已选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange_hf"
        :page-size="Number(templateTable.pageSize)"
        layout="total, prev, pager, next"
        :total="Number(templateTable.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
  import { apiHost } from '../../../config/settings.js'
  import { column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        imgHost: '',
        formInline: {
          relateId: '',
          relateName: '',
          status: '',
          equipmentType: ''
        },
        tableData: [],
        isLoading: false,
        pageData: {
          pageSize: 10,
          page: 1
        },
        total: '',
//      详情弹窗
        detailData: {},
        detailDialog: false,
//      默认皮肤
        formPf: {
          equipmentType: '22'
        },
        dialogTemplate: false,
        templateTable: {
          data: [],
          page: 1,
          pageSize: 10,
          total: ''
        }
      }
    },
    methods: {
      templateAdd () {
        this.openNewWindow('hfcx_add', '新增换肤', 'hfcx_add')
      },
      defaulPf () {
        const _data = {
          skinType: 0,
          skinId: '',
          skinName: '',
          state: 0,
          equipmentType: this.formPf.equipmentType,
          page: this.templateTable.page,
          pageSize: 10
        }
        column.hfTemplate.list(_data, (res) => {
          console.log(res, '皮肤模板列表')
          if (res.message === 'ok') {
            this.templateTable.data = res.content.content
            this.templateTable.total = res.content.count
            this.dialogTemplate = true
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      equipmentTypeChange (val) {
        this.defaulPf()
      },
      check (index, row) {
        const _data = {
          skinId: row.skinId,
          updateUser: this.userId,
          updateUserName: this.userName,
          equipmentType: this.formPf.equipmentType
        }
        column.hfgl.check(_data, res => {
          if (res.message === 'ok') {
            row.status = 1
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      onSubmit () {
        this.isLoading = true
        var _data = Object.assign(this.formInline, this.pageData)
        column.hfgl.list(_data, (res) => {
          console.log(res)
          if (res.message === 'ok') {
            this.tableData = res.content.content
            this.total = res.content.count
            this.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      handle (index, row, event) {
        const handleName = event.target.innerText
        switch (handleName) {
          case '详情':
            column.hfgl.detail({relateId: row.relateId}, (res) => {
              if (res.message === 'ok') {
                this.detailData = res.content
                this.detailDialog = true
              } else {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'error'
                })
              }
            })
            break
          case '作废':
            this.$confirm('您确定要作废该条活动吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              column.hfgl.cancel({relateId: row.relateId, updateUser: this.userId, updateUserName: this.userName}, (res) => {
                if (res.message === 'ok') {
                  this.onSubmit()
                } else {
                  this.$message({
                    type: 'error',
                    message: res.message
                  })
                }
              })
            }).catch(() => {
            })
            break
//          case '编辑':
//            this.openNewWindow('templatea_edit', '编辑模板', 'templatea_edit', row)
        }
      },
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      },
      handleCurrentChange_hf (val) {
        this.templateTable.page = val
        this.defaulPf()
      }
    },
    computed: {
      userId: function (state) {
        return this.$store.state.user.info.user_id
      },
      userName: function (state) {
        return this.$store.state.user.info.user_name
      },
      update_state: function () {
        return this.$store.state.updateState.hfcxState
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.onSubmit()
      }
    },
    created () {
      this.imgHost = apiHost.imgHost
      this.onSubmit()
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
